<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>{{ title }}</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<ion-content class='enter-leader'>
    <!-- 日期选择栏 -->
    <div class="enter-leader-dateselect" id="enter-leader-dateselect">
        <img src="assets/imgs/gallery/SVG/17182.svg" (click)="changeDate(0)">
        <ion-item id="sfwal-date">
            <ion-datetime displayFormat="YYYY-MM-DD" pickerFormat="YYYY MM DD" [(ngModel)]="nowDate" doneText="确定" cancelText="取消">
            </ion-datetime>
        </ion-item>
        <ion-icon name="ios-arrow-down"></ion-icon>
        <img src="assets/imgs/gallery/SVG/17183.svg" (click)="changeDate(1)">
    </div>
    <!-- 数据总计栏 -->
    <div class="enter-leader-type">
        <div class="Rchart">
            <pie-chart [options]="options"></pie-chart>
            <div class="pie-data text-center">
                <p class="main-title">总数</p>
                <p class="sub-title">{{ 12 }}<span></span></p>
            </div>
        </div>
        <div>
            <span>公司</span>
            <p>{{ 25 }}</p>
        </div>
        <div>
            <span>外出</span>
            <p>{{ 10 }}</p>
        </div>
        <div>
            <span>请假</span>
            <p>{{ 2 }}</p>
        </div>
        <div>
            <span>异常</span>
            <p>{{ 10 }}</p>
        </div>
    </div>
    <div class="enter-leader-line"></div>
    <!-- 部门领导栏 -->
    <div class="enter-leader-leadership">
        <div>{{ '郭仲春' }}</div>
        <div>{{ '08:36' }}</div>
        <div>{{ '18:36' }}</div>
        <div>{{ '在线' }}</div>
    </div>
    <div class="enter-leader-line"></div>
    <!-- 部门数据栏 -->
    <div class="enter-leader-content">
        <ul *ngFor="let data of departs,let index = index">
            <li (click)="toggle(index)">
                <label for="">{{ data.DeptName }}</label>
                <span><strong><em>(</em>&nbsp;{{ data.total }}</strong>公司<i>&nbsp;{{ data.companys }}</i>,&nbsp;外出<i>&nbsp;{{ data.outs }}</i>,&nbsp;请假<i>&nbsp;{{ data.leaves }}</i>,&nbsp;异常<i>&nbsp;{{ data.abnormals }}&nbsp;<em>)</em></i></span>
                <ion-icon *ngIf="data.shown" name="ios-arrow-up"></ion-icon>
                <ion-icon *ngIf="!data.shown" name="ios-arrow-down"></ion-icon>
            </li>
            <div *ngFor="let item of data.info" class="panel-body">
                <ul *ngIf="data.shown">
                    <li>{{ item.UserName }}</li>
                    <li>{{ item.startTime }}</li>
                    <li>{{ item.endTime }}</li>
                    <li [ngClass]="{active:item.state=='异常'}">{{ item.state }}</li>
                </ul>
            </div>
        </ul>
    </div>
</ion-content>